<!DOCTYPE html>
<html>
<head>
	<title>快雪时晴的网页习作</title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		.container {
			background-image: url(img/b3.png);
			width: 1000px;
			margin: 0 auto;
		}
		.container .header {
			background-color: rgba(99,99,99,0.2);
			width: 1000px;
			height: 80px;
		}
		.container .header .logo {
			/*background-color: red;*/
			width: 120px;
			height: 80px;
			float: left;
			margin-left: 100px;
		}
		.container .header .logo img{
			height: 60px;
			width: 60px;
			padding-top: 10px;
		}
		.container .header .nav {
			/*background-color: purple;*/
			width: 700px;
			height: 80px;
			float: right;
		}
		.container .header .nav ul li {
			float: left;
			height: 80px;
			line-height: 80px;
			margin-right: 20px;
			display: inline-block;
		}
		.container .header .nav ul li a {
			display: block;
			line-height: 80px;
			height: 80px;
			padding: 0 20px;
			color: #666;
			font-weight: bolder;
		}
		.container .main {
			/*background-color: blue;*/
			width: 1000px;
			height: 420px;
		}
		.container .main .m-left {
			height: 420px;
			width: 500px;
			float: left;
		}
		.container .main .m-left .swiper-container {
			height: 400px;
			width: 400px;
			margin-top: 10px;
			margin-left: 20px;	
		}
		.container .main .m-left .swiper-container img {
			height: 400px;
			width: 400px;
		}
		.container .main .m-right {
			float: right;
			margin-top: 20px;
			margin-right: 20px;
			padding-right: 20px;
			height: 380px;
			width: 460px;
			/*background-color: rgba(99,99,99,0.1);*/
			
		}
		.container .main .m-right h2{
			padding-right: 20px;
			margin-top: 50px;
			/*width: 460px;*/
			text-align: left;
		}
		.container .main .m-right p {
			width: 440px;
			margin-top: 20px;
			margin-right: 40px;
			overflow: hidden;
			text-align: left;
			line-height:30px;
			font-size: 0.8em;
		}
		.container .footer {
			background-color: rgba(99,99,99,0.2);
			height: 80px;
			width: 1000px;
		}
		.container .footer p {
			height: 80px;
			line-height: 80px;
			width: 350px;
			margin: 0 auto;
			display: inline-block;
			float: right;
			font-size: 0.5em;
			color: #666;
		}

	</style>
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="logo">
				<img src="img/logo.png">
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">HTML笔记</a> </li>
					<li><a href="#">JS笔记</a> </li>
					<li><a href="#">CSS笔记</a> </li>
					<li><a href="#">我的作品</a> </li>
					<li><a href="#">联系方式</a> </li>
				</ul>
			</div>
		</div>
		<div class="main">
			<div class="m-left">
				<div class="swiper-container">
					<div class="swiper-slide">
						<img src="img/img1.jpg">
					</div>
					<!-- <div class="swiper-slide">
						<img src="img/img2.jpg">
					</div>
					<div class="swiper-slide">
						<img src="img/img3.jpg">
					</div>
					<div class="swiper-slide">
						<img src="img/img4.jpg">
					</div> -->
					<!-- 此处为轮播图，还没来得及写 -->
				</div>
			</div>
			<div class="m-right">
				<h2>左侧是轮播图，来不及做了</h2>
				<p>详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！详细的轮播图如何做，今天就来学习和回忆一下吧！</p>
			</div>
		</div>
		<div class="footer">
			<p>
				©Copyright&nbsp;&nbsp;@&nbsp;&nbsp;2021&nbsp;&nbsp;快雪时晴
			</p>
		</div>
	</div>
</body>
</html>